<template>
  <div id="shop-product-page" class="shop-page" :style="{
    paddingTop:(this.getSafeArea().top)+'px',
    height:(getWinSize().height-50-this.getSafeArea().top)+'px'
  }">
    <!--店铺头部-->
    <shop-header v-if="shop.id>0" :shop="shop" :style="{top:(this.getSafeArea().top)+'px'}"/>

    <product-filter-bar :classify-name-params="$route.query.classifyName?$route.query.classifyName:''" :style="{top:(this.getSafeArea().top+155)+'px'}"/>


    <i-scroller-box id="product-list" ref="i-scroller-box" :url="'ShopProduct/getList'" :height="getWinSize().height-(250+this.getSafeArea().top)" :style="{
      paddingTop:(165+this.getSafeArea().top)+'px'
    }">
      <template v-slot:list-item="{index,data}">
        <product-list-item :index="index" :show-type="0" :curr-product="data"></product-list-item>
      </template>
    </i-scroller-box>

    <shop-bottom-nav/>
  </div>
</template>

<script>
import ShopHeader from '../common/ShopHeader'
import ProductFilterBar from '../common/ProductFilterBar'
import ProductListItem from '../common/ProductListItem'
import ShopBottomNav from '../common/ShopBottomNav'
import IScrollerBox from '../common/IScrollerBox'
export default {
  name: 'ShopProduct',
  components: {IScrollerBox, ShopBottomNav, ProductListItem, ProductFilterBar, ShopHeader},
  data:function () {
    return {
      shop: {
        id: 0,
        name: '',
        logo: this.NoImageUrl,
        isCollect: false,
        collectNums: 0,
        productNums: 0,
        location: '',
        province: '',
        city: '',
        county: '',
        address: '',
        businessTime: '',
        sameCitySend: true,
        banner: []
      },
      productList:[]
    }
  },
  mounted () {
    this.getDetail()
    this.getProductList()
  },
  methods:{
    getDetail: function () {
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'Shop/getDetail', {
        id: $this.$route.query.id
      }, function (data) {
        $this.isLoading = false
        $this.shop = data
        $this.$forceUpdate()
      }, function (data) {
        $this.isLoading = false
        $this.successTip(data.message, 'error')
      })
    },
    // 商品列表
    getProductList:function () {
      let $this = this
      var form={
        shopId: $this.$route.query.id,
        sortOrder:'DESC',
        sortProp:'saleNums',
        pageSize:10,
      }
      if ($this.$route.query.searchKeywords){
        form.name=$this.$route.query.searchKeywords
      }
      $this.$refs['i-scroller-box'].getList({
        form:form
      })
    }
  }
}
</script>

<style scoped>

</style>
